<template>
     <quill-editor ref="myTextEditor" v-model="content" :options="editorOption"  style="height: 90%;
      margin-bottom: 10px" class="myTextEditor" @change="onEditorChange($event)"></quill-editor>
</template>
<script>
export default {
    name:"editor",
    props:["exkey","data"],
    data(){
        return{
            pId:"",
            cId:"",
           content:"",
            editorOption: {
               /* modules: {
                history: {
                    delay: 1000,
                    maxStack: 50,
                    userOnly: false
                },*/
                toolbar: [
                    ['bold', 'italic', 'underline', 'strike'],
                    ['blockquote', 'code-block'],
                    [{ 'header': 1 }, { 'header': 2 }],
                    [{ 'list': 'ordered' }, { 'list': 'bullet' }],
                    [{ 'script': 'sub' }, { 'script': 'super' }],
                    [{ 'indent': '-1' }, { 'indent': '+1' }],
                    [{ 'direction': 'rtl' }],
                    [{ 'size': ['small', false, 'large', 'huge'] }],
                    [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
                    [{ 'font': [] }],
                    [{ 'color': [] }, { 'background': [] }],
                    [{ 'align': [] }],
                    ['clean'],
                    ['link', 'image']
                ],
                /*imageDrop: true,
                imageResize: {
                    displayStyles: {
                    backgroundColor: 'black',
                    border: 'none',
                    color: 'white'
                    },
                    modules: [ 'Resize', 'DisplaySize', 'Toolbar' ]
                }
                }*/
            }
           /* editorOption: {
                placeholder: "请在这里输入",
                modules: {
                toolbar: {
                    container: [
                    ["image"], //上传图片
                    ],
                    handlers: {
                    image: function (value) {
                        if (value) {
                        // 调用iview图片上传
                        document
                            .querySelector(".quillEditerClass .el-icon-plus")
                            .click();
                        } else {
                        this.quill.format("image", false);
                        }
                    },
                    },
                },
                },
            },*/
        }
    },
    created(){
        let ids=this.exkey.split(".");
        console.log("this.exkey=============="+this.exkey)
        this.pId=ids[0];
        this.cId=ids[1];
         this.content=unescape(this.data[this.pId][this.cId])
        let that=this;
      
    },
    methods:{
        onEditorChange(event){
        },
        string2Json(s) {
            var newstr = "";
            for (var i=0; i<s.length; i++) {
                let c = s.charAt(i);
                switch (c) {
                    case '\"':
                        newstr+="\\\"";
                        break;
                    case '\\':
                        newstr+="\\\\";
                        break;
                    case '/':
                        newstr+="\\/";
                        break;
                    case '\b':
                        newstr+="\\b";
                        break;
                    case '\f':
                        newstr+="\\f";
                        break;
                    case '\n':
                        newstr+="\\n";
                        break;
                    case '\r':
                        newstr+="\\r";
                        break;
                    case '\t':
                        newstr+="\\t";
                        break;
                    default:
                        newstr+=c;
                }
            }   
            return newstr;
        },
        onEditorChange({ quill, html, text }) {
            console.log('editor change!',  text)
            this.$emit("editorText",text)
        }
    },
    mounted(){
      
    },
    watch:{
         content: function (val,oldVal) {
             val=val.replace(/\"/g,"\\\"");
             this.data[this.pId][this.cId]=escape(val.replace(/ /g,"&nbsp"));
         }
    }
}
</script>
<style scoped>
.myTextEditor>>> p{
    margin:0
}
</style>